<template>
	<view>
		<uni-nav-bar fixed :border='false' @clickLeft="goback" left-icon="back" title="消费劵"></uni-nav-bar>
		<view class="shop_t" :style="{top:safeTop}">
			<view @click="change(1)" :class="typechang == 1?'ats':'ts'">
				可使用
			</view>
			<view @click="change(2)" :class="typechang == 2?'ats':'ts'">
				不可用
			</view>
		</view>
		<view class="coupon" v-for="(item,index) in list" :key="index"
			:style="{background:typechang == 1?'#2A2C3D':'#C3C3C3'}">
			<view class="coupon-info coupon-hole">
				<view class="t1" :style="{color:typechang == 1?'#29A85C':'#ffffff'}">
					{{item.amount.integer}}
					<text v-if="item.amount.decimal">.{{item.amount.decimal}}</text>
				</view>
				<view class="t2">
					满 {{item.amountRequire}} 可用
				</view>
			</view>
			<view class="coupon-get">
				<view class="">
					<view class="t1">
						全平台通用
					</view>
					<view class="t2">
						有效期至 {{item.endTime.substring(0,10)}}
					</view>
				</view>
				<view class="" v-if="typechang == 1">
					<view class="btn1" @click="goindex">去使用</view>
				</view>
				<view class="btns" v-else>
					<view class="btn">{{item.status}}</view>
					<!-- <view class="btn">已失效</view> -->
				</view>
			</view>
		</view>
		<view class="kong" v-if="nolist">
			<view class="">
				<image src="../static/juank.png" mode=""></image>
				<view class="ts">
					尚无消费券
				</view>
			</view>
		</view>
		<view class="" style="height: 200rpx;">
		</view>
		<view class="footerbtn" @click="$pageGo('/mypage/dhxfj')">
			<view class="cont">
				<view class="btn">
					兑换消费券
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		couponYes,
		couponNo
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				safeTop: uni.getStorageSync('statusBarHeight'),
				typechang: 1,
				params: {
					pageNum: 1,
					pageSize: 10
				},
				nolist: false,
				list: []
			};
		},
		onShow() {
			this.params.pageNum = 1
			this.list = []
			this.getlist()
		},
		onReachBottom() {
			this.params.pageNum++
			this.getlist()
		},
		methods: {
			operateData(res){
				res.rows.forEach(item => {
					item.amount = this.$splitNumber(item.amount);
				})
				this.list.push(...res.rows)
				let total = Math.ceil(res.total / this.params.pageSize);
				this.nolist = total == 0
			},
			getlist(){
				if (this.typechang == 1) {
					couponYes(this.params).then(res => {
						this.operateData(res)
					})
				} else {
					couponNo(this.params).then(res => {
						this.operateData(res)
					})
				}
			},
			goindex() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			goback() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			change(type) {
				this.typechang = type
				this.params.pageNum = 1
				this.list = []
				this.getlist()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FBFBFB;
	}

	.kong {
		width: 100%;
		margin: 230rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		image {
			width: 228rpx;
			height: 228rpx;
		}

		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
			margin-top: 20rpx;
		}
	}

	.shop_t {
		display: flex;
		background: #fff;
		padding-top: 10rpx;
		position: sticky;
		z-index: 9;
		width: 100%;

		.ts {
			width: 50%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			padding-bottom: 20rpx;
			border-bottom: 2px solid #E6E6E6;
		}

		.ats {
			width: 50%;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			padding-bottom: 20rpx;
			border-bottom: 2px solid #000000;
		}
	}

	.footerbtn {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.cont {
			display: flex;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			justify-content: center;

			.btn {
				width: 670rpx;
				height: 100rpx;
				background: #000000;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				color: #FFFFFF;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 100rpx;
				text-align: center;
			}

			.absbtn {
				background: #808080;
			}
		}
	}

	.coupon {
		display: inline-flex;
		color: white;
		position: relative;
		overflow: hidden;
		background: #2A2C3D;
		width: 710rpx;
		height: 178rpx;
		left: 20rpx;
		margin: 20rpx auto 0rpx;
	}

	/* 左边框的波浪 */
	.coupon::after {
		content: '';
		position: absolute;
		top: 0;
		height: 100%;
		width: 28rpx;
		background-image: radial-gradient(white 0, white 8rpx, transparent 8rpx);
		/** 如果只设置为半径的两倍(直径)，那么半圆之间没有类似堤岸的间隔 */
		background-size: 28rpx 28rpx;
		background-position: 0 4rpx;
		background-repeat: repeat-y;
		z-index: 1;
	}

	.coupon::after {
		right: -14rpx;
	}

	.coupon-info {
		padding: 20rpx 0rpx;
		position: relative;
		min-width: 188rpx;
		border-right: 1px dashed #838597;
		box-sizing: border-box;
		text-align: center;
		.t1 {
			font-family: 'DINB';
			font-weight: bold;
			font-size: 72rpx;
			color: #29A85C;
			text{
				font-size: 40rpx;
			}
		}

		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.coupon-info::before {
		top: -0.5rem;
	}

	.coupon-info::after {
		bottom: -0.5rem;
	}

	// /* 使用两个边框为圆角的白色div制造半圆缺角，有个缺点是这个缺角必须与背景色相同（clip-path不好弄） */
	.coupon-hole::before,
	.coupon-hole::after {
		content: '';
		width: 1rem;
		height: 1rem;
		background-color: white;
		border-radius: 50%;
		position: absolute;
		right: -0.5rem;
	}

	.coupon-get {
		padding: 38rpx;
		box-sizing: border-box;
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.t2 {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #FFFFFF;
			margin-top: 30rpx;
		}

		.btn1 {
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			width: 148rpx;
			height: 56rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			border: 2rpx solid #FFFFFF;
			text-align: center;
			line-height: 56rpx;
		}

		.btn {
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			width: 148rpx;
			height: 56rpx;
			background: #C3C3C3;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			border: 2rpx solid #FFFFFF;
			text-align: center;
			line-height: 56rpx;
		}
	}
</style>